<template>
  <div class="container">
    <musicTop></musicTop>
    <div class="content">
    <router-view></router-view>
   <!-- 音乐播放条 -->
   <Playbar @setCurrentTime="setCurrentTime" />
    </div>
    <div class="buttom">
      <musicButtom></musicButtom>
    </div>
  </div>
</template>

<script setup>
import Playbar from '@/components/music/components/Playbar.vue'
import { getCurrentInstance, onMounted, reactive, watchEffect, ref, provide } from "vue";
import { useRoute, useRouter } from "vue-router";
import Loading from "@/components/Loading.vue";
import songList from "@/components/music/components/songList.vue";


import { musicList } from '@/api/music/music.ts'

const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const currentTime = ref(0);

// 当前音频的播放时长
const setCurrentTime = (t) => {
  currentTime.value = t;
};

// 下发当前音频时间戳
provide('currentTime', currentTime);

</script>

<style lang="scss" scoped>
.container{
  display: flex;
  flex-direction:column;
  align-items: center;
  .content{
    margin-top: 70px;
    min-height: 900px;
    width: 100%;
  }
  .buttom{
    width: 100%;
    height: 50px;
  }
}
</style>